﻿@{
    ViewBag.Title = "DropDownList : Select by Text or Value";
}

<h2>DropDownList : Select by Text or Value</h2>

<h3>Sample</h3>

@{
    Html.Telerik().DropDownList()
        .Name("dropdownlist")
        .HtmlAttributes(new { style = "width:300px" })
        .ClientEvents(events => events.OnLoad("dropdownlist_onLoad"))
        .Render();
}
<br />
<br />
<button style="margin-top:10px;" onclick="selectByText('Web Content Management');">Select Web Content Management (by Text)</button>
<br />
<br />
<button style="margin-top:10px;" onclick="selectByValue(7);">Select Item with Value 7 (by Value)</button>

<script type="text/javascript">
    var categories = [
        { Value: 1, Text: 'Developer Tools' },
        { Value: 2, Text: 'Agile Project Management' },
        { Value: 3, Text: 'Software Testing Tools' },
        { Value: 4, Text: 'Software Testing Tools' },
        { Value: 5, Text: 'Web Content Management' },
        { Value: 6, Text: 'SharePoint' },
        { Value: 7, Text: 'Free Tools' },
        { Value: 8, Text: 'Unselectable' }
    ];

    dropdownlist_onLoad = function (e) {
        var dropdownlist = $('#dropdownlist').data('tDropDownList');
        dropdownlist.dataBind(categories);
    }

    selectByText = function (text) {
        var dropdownlist = $('#dropdownlist').data('tDropDownList');
        dropdownlist.selectByText(text);
    }

    selectByValue = function (value) {
        var dropdownlist = $('#dropdownlist').data('tDropDownList');
        dropdownlist.selectByValue(value);
    }

</script>